<template>
<div>
  <div class="cfd-content text-left">
    <p>{{$t('uc.cfd.title')}} </p>
    <Table :columns="tableColums" :data="tableData" :loading="loading" :disabled-hover="true"></Table>
    <div class="mt20 moni">
      <span>{{$t('uc.cfd.demoaccount')}}</span>
      <Button type="primary" @click="add">{{$t('uc.cfd.add')}}</Button>
    </div>
    <Table :columns="demotableColums" :data="demotableData" :loading="demoloading" :disabled-hover="true" class="mt20"></Table>
    <Modal
        v-model="modal"
        :title="$t('uc.cfd.add')">
      <div>
        <Form ref="form" :model="form" :rules="ruleValidate" :mask-closable="false" :footer-hide="true" :label-width="100">
          <FormItem :label="$t('uc.cfd.name')" prop="name">
            <Input v-model="form.name"></Input>
          </FormItem>
          <FormItem :label="$t('uc.cfd.currency')">
            <Select v-model="form.type">
              <Option value="USD">USD</Option>
            </Select>
          </FormItem>
          <FormItem :label="$t('uc.cfd.leverage')">
            <Select v-model="form.ggbl">
              <Option :value="100" label="100">100:1</Option>
            </Select>
          </FormItem>
          <FormItem :label="$t('uc.cfd.tradepwd')" prop="pwd">
            <Input v-model="form.pwd" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem :label="$t('uc.cfd.amount')">
            <Select v-model="form.zjed">
              <Option :value="100000">100000</Option>
              <Option :value="500000">500000</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="ok('form')">{{ $t('uc.cfd.submit') }}</Button>
            <Button @click="cancel" style="margin-left: 8px">{{ $t('uc.cfd.cancel') }}</Button>
          </FormItem>
        </Form>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</div>
</template>

<script>
export default {
  name: "Cfd",
  data() {
    return {
      modal: false,
      tableData: [{
        account: "George Lee",
        id: "123",
        type: "MYB",
        status: "aaa",
        balannce: 23.22

      }],
      loading: false,
      demoloading: false,
      demotableData: [],
      form: {
        name: "",
        type: "USD",
        ggbl: 100,
        pwd: '123456',
        zjed: 100000
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: 'Trade-pwd cannot be empty', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    tableColums() {
      let self = this;
      let columns = [];
      columns.push({
        title: this.$t("uc.cfd.account"),
        key: "account",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.account
                }
              },
              (params.row.account || "-")
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.id"),
        key: "id",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.id
                }
              },
              params.row.id || "0"
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.type"),
        key: "type",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.type
                }
              },
             params.row.type
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.status"),
        key: "status",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.status
                }
              },
              params.row.status
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.balance"),
        key: "balance",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.balance
                }
              },
              self.toFloor(params.row.balance || "0")
          );
        }
      });
      return columns;
    },
    demotableColums() {
      let self = this;
      let columns = [];
      columns.push({
        title: this.$t("uc.cfd.account"),
        key: "account",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.account
                }
              },
              (params.row.account || "-")
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.id"),
        key: "id",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.id
                }
              },
              params.row.id || "0"
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.type"),
        key: "type",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.type
                }
              },
             params.row.type
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.status"),
        key: "status",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.status
                }
              },
              params.row.status
          );
        }
      });
      columns.push({
        title: this.$t("uc.cfd.balance"),
        key: "balance",
        align: "center",
        render(h, params) {
          return h(
              "span",
              {
                attrs: {
                  title: params.row.balance
                }
              },
              self.toFloor(params.row.balance || "0")
          );
        }
      });
      return columns;
    }
  },
  methods: {
    add() {
     this.form={
            name: "",
            type: "USD",
            ggbl: 100,
            pwd: '123456',
            zjed: 100000
      }
      this.modal = true
    },
    ok(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    cancel() {
      this.modal = false
    }
  }
}
</script>

<style scoped>
.text-left {
  text-align: left;
}
.mt20 {
  margin-top: 20px;
}
.moni {
  display: flex;
  justify-content: space-between;
}
</style>